<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form v-show="showSearch" ref="queryForm" :model="queryParams"
                 :inline="true" label-width="68px" @submit.native.prevent>
          <el-form-item label="流程名称" prop="processName">
            <el-input
              v-model.trim="queryParams.processName"
              placeholder="请输入流程名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="流程类型" prop="categoryId">
            <el-select v-model="queryParams.categoryId" placeholder="请选择流程类型" clearable
                       size="small">
              <el-option
                v-for="item in processCategoryList"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <div>
          <div class="flex-1" />
          <div style="display:flex;">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <div class="flex-1" />
          <dt-dialog-column v-model="isShowTable" :columns="showColumns" :table-ref="$refs.table"
                            @queryTable="getList" />
        </div>
        <el-table v-if="isShowTable" ref="table" v-loading="loading"
                  border highlight-current-row :data="tableData"
                  :header-cell-style="{ backgroundColor: '#f2f2f2'}">
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            :index="(index)=>(queryParams.pageNo - 1) * queryParams.pageSize + index + 1"
          />
          <el-table-column v-if="showColumns[0].show" key="processName" label="流程名称"
                           show-overflow-tooltip align="center" prop="processName" />
          <el-table-column v-if="showColumns[1].show" key="categoryName" label="流程类型"
                           show-overflow-tooltip align="center" prop="categoryName" />
          <el-table-column v-if="showColumns[2].show" key="currentActivity" label="当前步骤"
                           show-overflow-tooltip align="center" prop="currentActivity" />
          <el-table-column v-if="showColumns[3].show" key="taskType" label="任务类型"
                           show-overflow-tooltip align="center" prop="taskType">
            <template slot-scope="scope">
              <dt-dict-tag :options="dict.type.taskType" :value="scope.row.taskType" />
            </template>
          </el-table-column>
          <el-table-column v-if="showColumns[4].show" key="startUserName" label="申请人"
                           show-overflow-tooltip align="center" prop="startUserName" />
          <el-table-column v-if="showColumns[5].show" key="startTime" label="申请时间"
                           show-overflow-tooltip align="center" prop="startTime"
                           width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :key="Math.random()" label="操作" fixed="right"
                           align="center" class-name="small-padding fixed-width" width="92">
            <template slot-scope="scope">
              <el-button
                v-permission="['AGENCYTASKS_HANDLE_BUTTON']"
                size="small"
                @click="handle(scope.row)"
              >处理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <dt-pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { flowableToDoTaskPage } from '@/framework/api/affairManage/agencyTasksConfig/Config'
import { processCategory } from '@/framework/api/affairManage/initiateApplicationConfig/Config'

export default {
  name: 'AgencyTasks',
  dicts: ['taskType'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显隐表格
      isShowTable: true,
      // 列显隐数组
      showColumns: [
        { prop: 'processName', label: '流程名称', show: true },
        { prop: 'categoryName', label: '流程类型', show: true },
        { prop: 'currentActivity', label: '当前步骤', show: true },
        { prop: 'taskType', label: '任务类型', show: true },
        { prop: 'startUserName', label: '申请人', show: true },
        { prop: 'startTime', label: '申请时间', show: true }
      ],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 参数配置表格数据
      tableData: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        processName: null,
        categoryId: null
      },
      processCategoryList: []
    }
  },
  created() {
    this.getList()
    this.getProcessCategory()
  },
  methods: {
    /** 查询参数配置列表 */
    getList() {
      this.loading = true
      flowableToDoTaskPage(this.queryParams).then(({ data: response }) => {
        this.tableData = response.rows
        this.total = response.totalRows
        this.loading = false
      })
    },
    /** 获取流程类型数据 */
    getProcessCategory() {
      processCategory().then(({ data: response }) => {
        this.processCategoryList = response
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 处理按钮操作 */
    handle(row) {
      if (row.thirdSystemUrl) {
        window.location.href = row.thirdSystemUrl
      } else {
        this.$router.push({
          path: '/flowDetail',
          query: {
            data: row,
            taskId: row.id, // 待办任务的id
            id: row.instanceId, // 流程实例id
            type: 'needtodo'// 流程类型-待办
          }
        })
      }
    }
  }
}
</script>
